import { NDataTable, NSpace } from 'naive-ui'
import { defineComponent } from 'vue'
import { useColumns } from './use-columns'
import { useTable } from './use-table'

const VersionManage = defineComponent({
  name: 'VersionManage',
  props: {
    taskDefinedId: {
      type: Number,
      required: true
    },
    currentTaskLogId: {
      type: Number,
      required: true,
      default: 0
    }
  },
  emits: ['switchVersion'],
  setup() {
    const { state, getList, onOperationClick } = useTable()
    const { columnsRef, versionVariable } = useColumns(onOperationClick)
    return {
      state,
      getList,
      columnsRef,
      versionVariable
    }
  },
  watch: {
    currentTaskLogId() {
      this.versionVariable.currentTaskLogId = this.currentTaskLogId
      this.getList()
    }
  },
  mounted() {
    this.state.switchVersionFunc = this.switchVersion
    this.state.taskDefinedId = this.taskDefinedId
    this.versionVariable.currentTaskLogId = this.currentTaskLogId
    this.getList()
  },
  methods: {
    switchVersion(taskLogId: number) {
      this.$emit('switchVersion', taskLogId)
    }
  },
  render() {
    return (
      <NSpace vertical>
        <NDataTable
          row-class-name='items'
          columns={this.columnsRef.columns}
          size='small'
          data={this.state.list}
          loading={this.state.loading}
          scrollX={this.columnsRef.tableWidth}
        />
      </NSpace>
    )
  }
})

export default VersionManage
